<html lang="en"> 
<head> 
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
	<title>OpenTok OT_LayoutContainer.js Example</title> 
	<script src="http://staging.tokbox.com/v0.91/js/TB.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="OT_LayoutContainer.js" type="text/javascript" charset="utf-8"></script> 
	<script type="text/javascript" charset="utf-8"> 
		var apiKey = 1127; // OpenTok sample API key. Replace with your own API key.
		var sessionId = '287a9e4ad0aa8e501309df11fe53831452fa1167'; // Replace with your session ID.
		var token = 'devtoken'; // Should not be hard-coded.
								// Add to the page using the OpenTok server-side libraries.
		var session;
		
		var accessEntered = false;
 
		// Un-comment either of the following to set automatic logging and exception handling.
		// See the exceptionHandler() method below.
		// TB.setLogLevel(TB.DEBUG);
		TB.addEventListener("exception", exceptionHandler);
 
		if (TB.checkSystemRequirements() != TB.HAS_REQUIREMENTS) {
			alert("You don't have the minimum requirements to run this application."
				  + "Please upgrade to the latest version of Flash.");
		} else {
			// Initialize the session
			session = TB.initSession(sessionId);
 
			// Add event listeners to the session
			session.addEventListener('sessionConnected', sessionConnectedHandler);
			session.addEventListener('streamCreated', streamCreatedHandler);
			session.addEventListener('streamDestroyed', streamDestroyedHandler);
			
			// Initialize the layout container
			OT_LayoutContainer.init("streamContainer", 500, 340); 
		}
 
		//--------------------------------------
		//  LINK CLICK HANDLERS
		//--------------------------------------
 
		/*
		If testing the app from the desktop, be sure to check the Flash Player Global Security setting
		to allow the page from communicating with SWF content loaded from the web. For more information,
		see http://www.tokbox.com/opentok/build/tutorials/helloworld.html#localTest
		*/
		function connect() {
			session.connect(apiKey, token);
		}
 
		function disconnect() {
			session.disconnect();
		}
 
		//--------------------------------------
		//  OPENTOK EVENT HANDLERS
		//--------------------------------------
 
		function sessionConnectedHandler(event) {
		    // Publish my stream to the session
			publishStream();			
			
			// Subscribe to all streams currently in the Session
			subscribeToStreams(event.streams);
		}
 
		function streamCreatedHandler(event) {
			// Subscribe to the newly created streams
			subscribeToStreams(event.streams);
			
			// Re-layout the container with the new streams
			if (accessEntered) {
				OT_LayoutContainer.layout();
			}
		}
 
		function streamDestroyedHandler(event) {	
			// Get all destroyed streams		
			for (var i = 0; i < event.streams.length; i++) {
				// For each stream get the subscriber to that stream
				var subscribers = session.getSubscribersForStream(event.streams[i]);
				for (var j = 0; j < subscribers.length; j++) {
					// Then remove each stream
					OT_LayoutContainer.removeStream(subscribers[j].id);
				}
			}
			
			// Re-layout the container without the removed streams
			if (accessEntered) {
				OT_LayoutContainer.layout();
			}
	
		}
 
		/*
		If you un-comment the call to TB.addEventListener("exception", exceptionHandler) above, OpenTok calls the
		exceptionHandler() method when exception events occur. You can modify this method to further process exception events.
		If you un-comment the call to TB.setLogLevel(), above, OpenTok automatically displays exception event messages.
		*/
		function exceptionHandler(event) {
			alert("Exception: " + event.code + "::" + event.message);
		}
 
		//--------------------------------------
		//  HELPER METHODS
		//--------------------------------------
 
		function publishStream() {
			// Make up an id for our publisher
			var divId = 'opentok_publisher';
			
			// Pass in TRUE since this is a publisher
			OT_LayoutContainer.addStream(divId, true);
			
			var publisher = session.publish(divId);
			publisher.addEventListener("accessAllowed", accessAllowedHandler);
			publisher.addEventListener("accessDenied", accessDeniedHandler);
		}
		
		function accessAllowedHandler() {
			accessEntered = true;
			
			OT_LayoutContainer.layout();
		}
		
		function accessDeniedHandler() {
			accessEntered = true;
			
			OT_LayoutContainer.removeStream('opentok_publisher');
			
			OT_LayoutContainer.layout();
		}
		
		function subscribeToStreams(streams) {
			// For each stream
			for (var i = 0; i < streams.length; i++) {
				// Check if this is the stream that I am publishing, and if so do not subscribe.
				if (streams[i].connection.connectionId != session.connection.connectionId) {
					// Make a unique div id for this stream
					var divId = 'stream_' + streams[i].streamId;

					// Pass in FALSE since this is a subscriber
					OT_LayoutContainer.addStream(divId, false);

					session.subscribe(streams[i], divId);				
				}
			}
		}
 
	</script> 
</head> 
<body> 
	<h1>OpenTok OT_LayoutContainer.js Example</h1>
	<div>
    	<p>The LayoutContainer class optimizes the layout of streams to fit within a specified area.  To see this in action, press Connect and then copy and paste this url into a new browser tab and Connect again to see the streams dynamically resize as more are added and removed.</p>
    </div>
	<div id="links"> 
       	<input type="button" value="Connect" id ="connectLink" onClick="javascript:connect()" /> 
	</div> 
	<div id="streamContainer" style="background: black;"></div> 
    <div>
    	<a href="https://github.com/jonmumm/OpenTok-JS-LayoutContainer">Github Repo</a> <br />
        <a href="http://www.tokbox.com/developersblog/?p=477">Blog Post</a> 
    </div>
</body> 
</html> 